import useDotting from '@/hooks/useDotting';
import useStageLayer, { Layer } from '@/hooks/useStageLayer';
import { getResPath } from '@/utils/cimup';
import * as componentsAny from '@/views/editor/stage/components';
import { defineStore } from 'pinia';
import { v4 as uuidv4 } from 'uuid';
import { useEditorStore } from './editor';
import { getInitGlobalEffectData } from '@/views/enum/global-effect';
import { initGlobalEffectLayer } from '@/service/global-effect';

export const useStageStore = defineStore('stage', () => {
  const sidebar1 = ref(''); // 选中的siderbar-上方
  const sidebar2 = ref(''); // 选中的siderbar-下方
  const rightVisible = ref(false); // 右侧面板可见性
  const draggingItem = ref<any>(null); // 正在推拽的元素
  const globalEffect = ref({});

  const editorStore = useEditorStore();
  const {
    layers,
    layerId,
    layerLoadedIdList,
    layerData,
    layerEventId,
    layerEventData,
    layerEventActionId,
    layerEventActionData,
    addLayer,
    updateLayer,
    removeLayer,
  } = useStageLayer();
  const { dotting, startDotting, stopDotting, resetDotting } = useDotting();

  // 初始化
  const init = () => {
    try {
      // 从json中解析图层数据
      const configJson =
        (editorStore.sceneDetail?.configJson && JSON.parse(editorStore.sceneDetail?.configJson)) ||
        {};
      layers.value = configJson?.stage?.layers || [];
      globalEffect.value =
        configJson?.stage?.globalEffect &&
        Reflect.ownKeys(configJson?.stage?.globalEffect).length > 0
          ? configJson?.stage?.globalEffect
          : getInitGlobalEffectData();
      if (configJson?.stage?.globalEffect) {
        initGlobalEffectLayer(globalEffect.value as any);
      }
    } catch (error) {
      console.log(error);
    }
  };

  // 添加图层
  const addStageLayer = (layer: any) => {
    if (layer.type) {
      const type = layer?.type?.toUpperCase() || '';
      let initialData: any = {};
      const components: any = componentsAny;
      const initial = components[type]?.initial;
      if (typeof initial === 'function') {
        initialData = initial(layer);
      } else {
        initialData = initial;
      }

      const uuid = uuidv4();
      const id = type + '-' + uuid;
      const title = layer.title + '_' + uuid.substring(0, 8);
      const dataSourceUrl = getResPath(layer.dataSourceUrl);
      const newLayer: Layer = {
        type,
        id,
        title,
        enable: true,
        parent: '',
        events: [],
        ...initialData,
        data: {
          ...layer?.data,
          dataSourceUrl,
          ...initialData?.data,
        },
      };

      addLayer(newLayer);
      sidebar2.value = 'layer';
      rightVisible.value = true;
      draggingItem.value = null;
    }
  };

  return {
    sidebar1,
    sidebar2,
    rightVisible,
    draggingItem,
    dotting,
    layers,
    layerId,
    layerLoadedIdList,
    layerData,
    layerEventId,
    layerEventData,
    layerEventActionId,
    layerEventActionData,
    globalEffect,
    init,
    addLayer,
    addStageLayer,
    updateLayer,
    removeLayer,
    startDotting,
    stopDotting,
    resetDotting,
  };
});
